<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>语义化标签</title>
    <style>
        *{
            margin:0;
            padding: 0;
        }
        .page {
            height:100vh;
            background-color: black;
        }
        /* 响应式（自适应）布局  网页可以相应设备 宽度 不能写死 px  100vw*/

    </style>
</head>
<body>
    <!-- 能够让html标签有更多的语义传达出来 -->
    <div class="page">
        <!-- html5 语义化标签 
            - 可以和div 一样做盒子，块级元素都适合
            - 可读性更强 团队  爬虫 有利于百度等分析网页的内容
               用户在搜素的时候，相关的内容更好的推荐出来
               做网页的时候，语义化更好，百度的排名更前一些
        -->
        <header class="header">header</header>
        <!-- 导航 -->
        <nav class="nav"></nav>
        <main class="main">
            <!-- 文章标签 -->
            <article class="article">
                <!-- 信息过载时代
                文章 -->
                <!-- 比div表达不同的盒子外，
                还可以传达出不同性质的内容 -->
                <section class="content">
                    <h1>HTML5</h1>
                    <p>
                        为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构
                    </p>
                </section>
            </article>
            <!-- 侧边栏 广告 -->
            <aside class="aside"></aside>
        </main>
        <footer class="footer">footer</footer>
    </div>
</body>
</html>